import React from 'react';
import { Card, Table, Tag, Tooltip, Typography, Space } from 'antd';
import { Course } from '../types/schedule';

const { Title, Text } = Typography;

interface ScheduleVisualizationProps {
  courses: Course[];
  startWeek: number;
  totalWeeks: number;
}

const ScheduleVisualization: React.FC<ScheduleVisualizationProps> = ({
  courses,
  startWeek,
  totalWeeks
}) => {
  // 时间节次映射
  const timeSlots = [
    '08:00-08:45', '08:55-09:40', '10:00-10:45', '10:55-11:40',
    '14:00-14:45', '14:55-15:40', '16:00-16:45', '16:55-17:40',
    '19:00-19:45', '19:55-20:40', '20:50-21:35', '21:45-22:30'
  ];

  // 星期映射
  const weekDays = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];

  // 课程类型颜色映射
  const getCourseTypeColor = (type: string) => {
    switch (type) {
      case 'required': return 'red';
      case 'elective': return 'blue';
      case 'practice': return 'green';
      default: return 'default';
    }
  };

  // 课程类型文本映射
  const getCourseTypeText = (type: string) => {
    switch (type) {
      case 'required': return '必修';
      case 'elective': return '选修';
      case 'practice': return '实践';
      default: return '未知';
    }
  };

  // 创建课表数据
  const createScheduleData = () => {
    const scheduleData: any[] = [];
    
    // 初始化12个时间段
    for (let timeSlot = 1; timeSlot <= 12; timeSlot++) {
      const row: any = {
        key: timeSlot,
        timeSlot: timeSlot,
        time: timeSlots[timeSlot - 1],
        monday: null,
        tuesday: null,
        wednesday: null,
        thursday: null,
        friday: null,
        saturday: null,
        sunday: null
      };
      
      // 为每个时间段填充课程
      courses.forEach(course => {
        if (course.timeSlot <= timeSlot && timeSlot < course.timeSlot + course.duration) {
          const dayKey = ['', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'][course.dayOfWeek];
          if (dayKey) {
            row[dayKey] = course;
          }
        }
      });
      
      scheduleData.push(row);
    }
    
    return scheduleData;
  };

  const scheduleData = createScheduleData();

  const columns = [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      width: 120,
      fixed: 'left' as const,
      render: (time: string, record: any) => (
        <div>
          <Text strong>第{record.timeSlot}节</Text>
          <div style={{ fontSize: '12px', color: '#666' }}>
            {time}
          </div>
        </div>
      ),
    },
    {
      title: '周一',
      dataIndex: 'monday',
      key: 'monday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周二',
      dataIndex: 'tuesday',
      key: 'tuesday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周三',
      dataIndex: 'wednesday',
      key: 'wednesday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周四',
      dataIndex: 'thursday',
      key: 'thursday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周五',
      dataIndex: 'friday',
      key: 'friday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周六',
      dataIndex: 'saturday',
      key: 'saturday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
    {
      title: '周日',
      dataIndex: 'sunday',
      key: 'sunday',
      width: 150,
      render: (course: Course | null) => renderCourseCell(course),
    },
  ];

  const renderCourseCell = (course: Course | null) => {
    if (!course) {
      return <div style={{ height: '60px' }}></div>;
    }

    return (
      <Tooltip
        title={
          <div>
            <div><strong>课程:</strong> {course.name}</div>
            <div><strong>教师:</strong> {course.teacher}</div>
            <div><strong>教室:</strong> {course.classroom}</div>
            <div><strong>学分:</strong> {course.credits}</div>
            <div><strong>类型:</strong> {getCourseTypeText(course.type)}</div>
            <div><strong>周次:</strong> 第{course.weeks.join(',')}周</div>
            {course.description && <div><strong>描述:</strong> {course.description}</div>}
          </div>
        }
      >
        <div
          style={{
            height: '60px',
            padding: '4px',
            backgroundColor: '#f0f8ff',
            border: '1px solid #d9d9d9',
            borderRadius: '4px',
            cursor: 'pointer',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center'
          }}
        >
          <Text strong style={{ fontSize: '12px', lineHeight: '14px' }}>
            {course.name}
          </Text>
          <Text style={{ fontSize: '10px', color: '#666' }}>
            {course.teacher}
          </Text>
          <Text style={{ fontSize: '10px', color: '#666' }}>
            {course.classroom}
          </Text>
          <div style={{ marginTop: '2px' }}>
            <Tag 
              color={getCourseTypeColor(course.type)} 
              style={{ fontSize: '8px', padding: '0 4px' }}
            >
              {getCourseTypeText(course.type)}
            </Tag>
          </div>
        </div>
      </Tooltip>
    );
  };

  return (
    <Card>
      <Title level={4}>
        课表可视化
        <Text type="secondary" style={{ fontSize: '14px', marginLeft: '8px' }}>
          (第{startWeek}-{startWeek + totalWeeks - 1}周)
        </Text>
      </Title>
      
      <Table
        columns={columns}
        dataSource={scheduleData}
        pagination={false}
        scroll={{ x: 1200 }}
        size="small"
        bordered
        style={{ marginTop: '16px' }}
      />
      
      <div style={{ marginTop: '16px' }}>
        <Space>
          <Text strong>图例:</Text>
          <Tag color="red">必修</Tag>
          <Tag color="blue">选修</Tag>
          <Tag color="green">实践</Tag>
        </Space>
      </div>
    </Card>
  );
};

export default ScheduleVisualization;
